{extend name="layouts/main" /}
{block name="link"}{/block}
{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
	<div class="layui-body layui-tab-content site-demo site-demo-body" style="top: 0px;left: 0px;">
		<div class="layui-tab-item layui-show">
			<div class="layui-main">
				<div id="LAY_preview">
					<blockquote class="layui-elem-quote layui-text" style="margin-bottom: 10px;">
						<i class="fa fa-home"></i>
						<span class="layui-breadcrumb">
							<a><cite>系统主页</cite></a>
							<a><cite>{$meta_title}</cite></a>
						</span>
					</blockquote>
					<div class="layui-fluid" style="position: relative;margin: 0 auto;padding: 0 0px;">
						<div class="layui-set">
							<div class="layui-set-from search-form">
								<form class="layui-form" action="">
									<div class="layui-form-item" style="margin-bottom: -8px;">
										<div class="layui-input-inline" style="margin-right: 5px;">
											<select name="status" id="status" lay-verify="required">
												<option value="" selected="selected">全部</option>
												<option value="1">显示</option>
												<option value="0">隐藏</option>
											</select>
										</div>
										<div class="layui-input-inline" style="margin-right: 5px;">
											<input type="text" name="title" value="{:input('title')}"  placeholder="搜索关键词" autocomplete="off" class="layui-input search-input">
										</div>
										<div class="layui-input-inline" style="width:47px;margin-right: 14px;">
											<button class="layui-btn" id="search"><i class="layui-icon"></i></button>
										</div>
										<div class="layui-input-inline" style="width:75px;margin-right: 14px;">
											{if condition="cookie('arctype_show')"}
											<button class="layui-btn" onclick="arctype_show(0)">
												<i class="layui-icon layui-icon-triangle-d"></i>展示
											</button>
											{else /}
											<button class="layui-btn" onclick="arctype_show(1)">
												<i class="layui-icon layui-icon-triangle-r"></i>折叠
											</button>
											{/if}
										</div>
										<!-- 栏目展示/折叠 -->
										<script type="text/javascript">
											function arctype_show(arctype_show){
												$.post("{:url('arctype_show')}",{arctype_show:arctype_show},function(result){
											        window.location.reload();
											    });
											}
										</script>
										<!-- <div class="layui-input-inline" style="width:131px;margin-right: 14px;">
											<a class="layui-btn layui-btn-warm ajax-get" href="{:url('Common/update_cache',array('type'=>'arctype'))}">
												<i class="layui-icon">စ</i>更新栏目缓存
											</a>
										</div> -->
										<div class="layui-input-inline">
											<a class="layui-btn" href="javascript:;" layuimini-content-href="{:url('cms.Attribute/index',['model_id'=>0,'table_name'=>'arctype'])}" data-title="字段" data-icon="fa fa-navicon">
												字段
											</a>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="layui-card" style="overflow-y: hidden;float: left;width: 100%;">
							<form class="layui-form" action="">
								<table class="layui-table" lay-filter="tableEvent">
									<colgroup>
										<col width="1">
										<col width="5%">
										<col width="6%">
										<col>
										<col width="15%">
										<col width="8%">
										<col width="25%">
									</colgroup>
									<thead>
										<tr pid="0">
											<th>
												<input type="checkbox" lay-skin="primary" id="allChoose" lay-filter="allChoose">
											</th>
											<th>ID</th>
											<th>序号</th>
											<th>栏目名称</th>
											<th>栏目标识</th>
											<th>状态</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										{volist name="list" id="info"}
										<tr id="{$info.id}" pid="{$info.pid}" level="{$info.level}">
											<td>
												<input type="checkbox" dis lay-skin="primary" class="ids" name="ids[]" value="{$info.id}" lay-filter="c_one">
											</td>
											<td>{$info.id}</td>
											<td><input type="text" name="sort[{$info.id}]" value="{$info.sort}" class="layui-input sort" lay-filter="weight"></td>
											<td>
												<span class="layui-btn layui-btn-xs open-up">-</span>&nbsp;
												<?php if($info['level'] !== 0){echo '|';} echo str_repeat('--',$info['level']*3);echo $info['typename'];?>
												<a href="javascript:;" onclick="x_admin_show('新增栏目','{:url('add',array('id'=>$info['id'],'model_id'=>$info['model_id']))}','','',1)" class="layui-btn layui-btn-xs" style="text-align: right;">
													<i class="layui-icon"></i>子分类
												</a>
												{if condition="$info['status'] eq 0"}
												<span class="layui-badge layui-bg-orange">隐</span>
												{/if}
												{if condition="$info['ispart'] eq 1"}
												<span class="layui-badge layui-bg-blue">列</span>
												<span class="layui-badge-rim">{$info.document_number}</span>
												{elseif condition="$info['ispart'] eq 2"/}
												<span class="layui-badge">封</span>
												{else /}
												<span class="layui-badge layui-bg-gray">外</span>
												{/if}
											</td>
											<td>{$info.name}</td>
											<td>
												<!--{$info.status_text}-->
												<input type="checkbox" class="switch" {if condition="$info['status'] eq 1"} checked="" {/if} url="{:url('setStatus')}" on="ids={$info.id}&status=1" off="ids={$info.id}&status=0" lay-skin="switch" lay-filter="switchTest" lay-text="显示|隐藏">
											</td>
											<td>
												<div class="layui-inline">
													<a class="layui-btn layui-btn-xs " href="javascript:;" onclick="x_admin_show('编辑栏目','{:url('edit',array('id'=>$info['id']))}','','',0)">
														<i class="layui-icon layui-icon-edit"></i> 编辑
													</a>
												</div>
												<div class="layui-inline">
													<a target="_blank" class="layui-btn layui-btn-xs " href="<?php echo get_nav($info['id'],'typeurl');?>">
														<i class="layui-icon layui-icon-release"></i> 预览
													</a>
												</div>
												{if condition="$info['status'] eq 0"}
												<div class="layui-inline">
													<a class="layui-btn layui-btn-xs layui-btn-normal ajax-get" href="{:url('setStatus',array('ids'=>$info['id'],'status'=>1))}">
														<i class="layui-icon layui-icon-release"></i> 显示
													</a>
												</div>
												{else/}
												<div class="layui-inline">
													<a class="layui-btn layui-btn-xs layui-btn-warm ajax-get" href="{:url('setStatus',array('ids'=>$info['id'],'status'=>0))}">
														<i class="layui-icon layui-icon-set-fill"></i> 隐藏
													</a>
												</div>
												{/if}
												<div class="layui-inline">
													<a class="layui-btn layui-btn-xs layui-btn-danger confirm ajax-get" url="{:url('del',array('ids'=>$info['id']))}">
														<i class="layui-icon layui-icon-delete"></i> 删除
													</a>
												</div>
											</td>
										</tr>
										{/volist}
										<tr pid="0">
											<td align="left" colspan="10" style="padding-left:0;">
												&nbsp;
												<div class="layui-inline">
													<a href="javascript:;" onclick="x_admin_show('新增栏目','{:url('add',['pid'=>0])}','','',1)" title="新增" class="layui-btn layui-btn-sm">新增</a>
												</div>
												<div class="layui-inline">
													<a href="" class="layui-btn layui-btn-sm ajax-post" target-form="sort" url="{:url('sort')}" title="排序" >排序</a>
												</div>
												<div class="layui-inline">
													<a href="" class="layui-btn layui-btn-sm layui-btn-normal ajax-post" target-form="ids" url="{:url('setStatus',array('status'=>1))}">显示</a>
												</div>
												<div class="layui-inline">
													<a href="" class="layui-btn layui-btn-sm layui-btn-warm ajax-post" target-form="ids" url="{:url('setStatus',array('status'=>0))}">隐藏</a>
												</div>
												<div class="layui-inline">
												 	<a href="" class="layui-btn layui-btn-sm layui-btn-danger confirm ajax-post" target-form="ids" url="{:url('del')}">删除</a>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</form>
							<!-- <div id="page">
								<div class="layui-box layui-laypage layui-laypage-default">
									<div class="pagelistbox">
										<span>共 2 页/31条记录 </span>
										<span class="indexPage">首页 </span>
										<strong>1</strong>
										<a href="#">2</a>
										<a class="nextPage" href="#">下页</a>
										<a class="endPage" href="#">末页</a>
									</div>
								</div>
							</div> -->
							<!-- <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-10"><span class="layui-laypage-prev">共 2 页/31条记录</span><a href="javascript:;" class="layui-laypage-prev" data-page="1">首页</a><a href="javascript:;" class="layui-laypage-prev" data-page="1">上一页</a><a href="javascript:;" data-page="1">1</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>2</em></span><a href="javascript:;" data-page="3">3</a><a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a><span class="layui-laypage-spr">…</span><a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a><a href="javascript:;" class="layui-laypage-next" data-page="3">下一页</a><a href="javascript:;" class="layui-laypage-next" data-page="3">尾页</a><a href="javascript:;" data-page="2" class="layui-laypage-refresh"><i class="layui-icon layui-icon-refresh"></i></a><span class="layui-laypage-skip">到第<input type="text" min="1" value="2" class="layui-input">页<button type="button" class="layui-laypage-btn">确定</button></span></div> -->
							<div id="page">
								<div class="layui-box layui-laypage layui-laypage-default">
									<div class="pagelistbox">
										<!-- 分页 -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
	$(function() {
        $("select[name='status']").val({$status|default = ''});
		xuanran('select');
    });
</script>
<!-- 规则伸缩状态js 第二种方法(收缩隐藏不用ajax) -->
<script type="text/javascript">
	$(function(){
        // 栏目伸缩
        // 1.隐藏非顶级栏目
        <?php if(empty($status) && empty($title)):?>
            {if condition="cookie('arctype_show')"}
        		$('tr[pid!=0]').hide(); //(暂时不隐藏了，开始时显示所有)
        		$('.open-up').text('+');
            {/if}
        <?php else:?>
        	$('.open-up').text('-');
        <?php endif;?>
        // 2.子栏目展开
        $('.open-up').on('click',function(){
            // 获取按钮状态
            // var flag = $(this).find('i').text();
            var flag = $(this).text();
            var index = $(this).parents("tr").attr("id");//注意parent和parents用法
            if(flag == "+"){
                // 改变按钮状态
                // $(this).find('i').text("-");
                $(this).text("-");
                // $('tr[pid='+index+']').show();//栏目展开
                $('tr[pid='+index+']').fadeIn('slow');//栏目展开并加渐变效果
            }else{
                // $(this).find('i').text("+");
                $(this).text("+");
                // $('tr[pid='+index+']').hide();//栏目收起
                // $('tr[pid='+index+']').fadeOut('slow');//栏目收起
                hidecate(index);//递归隐藏子栏目
            }
        });
    });
    // 隐藏子栏目 pid父级分类id，递归隐藏子栏目
    function hidecate(pid){
		$('tr[pid='+pid+']').each(function() {
			hidecate($(this).attr('id'));
		});
        // $('tr[pid='+pid+']').find('.shensuo').find('i').text("+");
        $('tr[pid='+pid+']').find('.open-up').text("+");
        $('tr[pid='+pid+']').fadeOut('slow');//栏目收起
    }
</script>
<?php if(0):?>
<script type="text/javascript">
	// 等级的js效果
	// prevAll()函数用于选取每个匹配元素之前的所有同辈元素，并以jQuery对象的形式返回。
	// 你还可以使用选择器来进一步缩小选取范围，筛选出符合指定选择器的元素。
	// 与该函数相对的是nextAll()函数，用于选取每个匹配元素之后的所有同辈元素。
	// 该函数属于jQuery对象(实例)。
	layui.use(['form','jquery'], function(){
		var form = layui.form, //表单
		$ = layui.jquery;  //jquery
		// 监听checkbox单选
		form.on('checkbox(c_one)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
			// console.log(data.value); //得到被选中的值
			// console.log(data.othis); //得到美化后的DOM对象
			var cur_tr=$(this).parent().parent();
			var level=cur_tr.attr('level');
			var checked=$(this).prop('checked');
			// 往上面一直循环的 当$(this).attr('level')=0 就return false;
			cur_tr.prevAll('tr').each(function(){
				if($(this).attr('level') < level && checked){
					// level=$(this).attr('level');
					level--;
					$(this).find(':checkbox').prop('checked',true);
					xuanran('checkbox');
					if($(this).attr('level')==0){
						return false;
					}
				}
			});
			if(!checked){
				cur_tr.nextAll('tr').each(function(){
					if($(this).attr('level') > level){
						$(this).find(':checkbox').prop('checked',false);
						xuanran('checkbox');
					}else{
						return false;
					}
				});
			}
        });
	});
</script>
<?php endif;?>
{/block}
